<div id="slide" class="slide">
  <ul>
  <tag:slide id="vo">
    <li><a href="javascript:void(0)"><img src="{$vo.img}"></a></li>
  </tag:slide>
  </ul>
</div>
<section class="photo mg10">
  <tag:photo id="vo">
  <div class="photo-item mb10 pd10 bdd br5 clearfix">
      <a href="{$vo.url}">
        <div class="photo-cover fr">
          <tag:photoImage id="vo1" pt="$vo['id']" limit="1">
            <img src="{$vo1.url}"/>
          </tag:photoImage>
        </div>
        <h4>{$vo.name}</h4>
        <p>{$vo.description}</p>
      </a>
  </div>
  </tag:photo>
</section>

<script type="text/javascript">
	
  (function(){
    var slide = function () {
      this.init();
    };
    slide.prototype = {
      init: function() {
        this.obj = document.getElementById( "slide" );
        this.ul = document.querySelector( "#slide ul" );
        this.li = document.querySelectorAll( "#slide li" );
        this.images = document.querySelectorAll( "#slide img" );
        this.index = 0;
        this.startX = this.startY = 0;
        this.moved = false;
        this.timer = this.play = null;
        this.width = document.documentElement.clientWidth;
        this.setSize();
        this.autoPlay();
        this.bindTouch();
      },
      bindTouch: function() {
  		  //绑定触摸事件
       this.obj.addEventListener("touchstart", (function( _this ) {
          return function() { 
            _this.touchStart.apply ( _this, arguments ); 
          };
        })(this), false);
        
        this.obj.addEventListener("touchmove", (function( _this ) {
          return function() {
            _this.touchMove.apply ( _this, arguments );
          }
        })(this), false);
        
        this.obj.addEventListener("touchend", (function( _this ) {
          return function() {
            _this.touchEnd.apply ( _this, arguments );
          }
        })(this), false);
        
        this.obj.addEventListener("touchcancel", (function( _this ) {
          return function() {
            _this.touchEnd.apply ( _this, arguments );
          }
        })(this), false);
      },
      setSize: function() {
        this.ul.style.width = this.width * this.li.length + "px";
        for (var i=0; li=this.li[i]; i++) {
          li.style.width = this.width + "px";
        }
      },
      autoPlay: function() {
        this.play = setInterval( (function( _this ) {
        	return function() {
            _this.index ++;
            _this.cover();
        	}
        })(this), 4000);
      },
      cover: function() {
        ( this.index < 0 ) && ( this.index = this.li.length-1 );
        ( this.index >= this.li.length ) && ( this.index = 0 );
        this.move( -this.index * this.width );
      },
      move: function( target ) {
        clearInterval( this.timer );
        var _this = this;
        this.timer = setInterval(function(){
          var speed = ( target - _this.ul.offsetLeft ) / 5;
          speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
          _this.ul.style.left = _this.ul.offsetLeft + speed + "px";
        }, 30);
      },
      touchStart: function( e ) {
        //清除自动播放
        clearInterval( this.play );
        e.preventDefault();
        var touch = e.touches[0];
        this.startX = touch.pageX;
        this.startY = touch.pageY;
      },
      touchMove: function( e ) {
    	  e.preventDefault();
        var touch = e.touches[0];
        var x = touch.pageX - this.startX;
        var y = touch.pageY - this.startY;
        if ( !this.moved ) {
          if ( x >= 40 && y <= 20 ) {
            this.index --;
            this.cover();
            this.moved = true;
          }
          if( x <= -40 && y <= 20 ) {
            this.index ++;
            this.cover();
            this.moved = true;
          }
        }
      },
      touchEnd: function( e ) {
    	  e.preventDefault();
        this.autoPlay();
        this.moved = false;
      }
    }
    
    window.addEventListener("load", function(){
      this.photoSlide = new slide();
    }, false);
    
    window.addEventListener("resize", function(){
      clearInterval( this.photoSlide.timer );
      clearInterval( this.photoSlide.play );
      this.photoSlide = new slide();
    }, false);
    
  })()
</script>